
<template>
  <div >
      <basic-container  v-if="true" >
          <div style="height: 300px;text-align: center;">
              <div style="display: inline-block;margin-top: 130px;color: #b7b5b5;letter-spacing: 5px;">该功能待开发</div>
          </div>
      </basic-container>
      <basic-container v-else>
        <el-row>
            <el-col :span="6">
                <div class="add-type">
                    <el-button type="primary" size="small"  @click="appendTreeType()">添加分类</el-button>
                </div>
                <el-tree :data="treeData" :props="treeOption" :expand-on-click-node="false" default-expand-all @node-click="handleNodeClick">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                        <span>
                            <el-button type="text" size="mini" @click="() => editTree(node,data)">修改</el-button>
                            <el-button type="text" size="mini" @click="() => removeTree(node, data)">删除</el-button>
                        </span>
                    </span>
                </el-tree>
            </el-col>
            <el-col :span="17" :offset="1">
                <el-form ref="formSearch" :model="formSearch" label-width="100px" size="small" :inline="true">
                    <el-col :span="6">
                        <el-form-item>
                            <el-button  type="primary" @click="handleAdd">添加</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18" align='right'>
                        <el-form-item>
                            <el-input v-model="formSearch.name" placeholder="请输入检测编码、检测项目名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="searchFormSubmit()">搜索</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="handleReset">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
                <!-- 表格 -->
                <avue-crud :option="tableOption" :data="tableData" :table-loading="tableLoading" :page="page" ref="crud" @current-change='currentPage'>
                    <template slot-scope="scope" slot="handleTime">
                        {{scope.row.status==1?'未留样':'已留样'}}
                    </template>
                    <template slot-scope="scope" slot="status">
                        {{scope.row.status==1?'未留样':'已留样'}}
                    </template>
                    <template slot-scope="scope" slot="editTime">
                        {{scope.row.name}}<span>-</span>{{scope.row.state}}
                    </template>
                    <template slot-scope="scope" slot="menu">
                        <el-button type="primary" size="small"  plain @click.stop="handleEdit(scope.row,scope.index)">修改</el-button>
                        <el-button type="primary" size="small"  plain @click.stop="handleDelete(scope.row,scope.index)">删除</el-button>
                    </template>
                </avue-crud>
            </el-col>
        </el-row>
    </basic-container>
    <!-- 修改/新增 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="30%">
        <el-form ref="dialogForm"  :model="dialogForm" :rules="rules"    label-position="left" label-width="110px">
            <el-form-item label="检测编码：" prop='sn'>
                <el-input v-model="dialogForm.sn" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="项目名称：" prop='name'>
                <el-input v-model="dialogForm.name" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="单位：" prop='company'>
                <el-input v-model="dialogForm.company" placeholder=""></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
            <el-button @click="dialogFormVisible = false">关 闭</el-button>
            <el-button type="primary" @click="handleAddLine('dialogForm')">确 认</el-button>
        </div>
    </el-dialog>
    <!-- 添加分类 -->
    <el-dialog title="添加分类" :visible.sync="dialogFormTypeVisible" width="30%">
        <el-form ref="dialogFormType"  :model="dialogFormType" :rules="rulesType"   label-position="left" label-width="110px">
            <el-form-item label="项目分类：" prop='parentId'>
                <el-cascader v-model="dialogFormType.parentId" :options="treeData" :show-all-levels="false"  @change="handleTree" :props='cascaderPeops' style="width:100%">
                    <template slot-scope="{ node, data }">
                        <span>{{ data.label }}</span>
                        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                    </template>
                </el-cascader>
            </el-form-item>
            <el-form-item label="" prop='content'  label-width="110px">
                <el-input v-model="dialogFormType.content" type="textarea" :autosize='{minRows: 6,maxRows: 10}' placeholder="在每个分类后面敲击“回车键”“换行”,可批量添加分类。"  @keyup.enter.native="changeInput"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
            <el-button @click="dialogFormTypeVisible = false">关 闭</el-button>
            <el-button type="primary" @click="handleAddType('dialogFormType')">确 认</el-button>
        </div>
    </el-dialog>
    <!-- 修改分类标题 -->
    <el-dialog title="修改分类名字" :visible.sync="dialogTypeTitleVisible" width="24%">
        <el-form ref="dialogTypeTitle"  :model="dialogTypeTitle" :rules="rulesTypeTitle"   label-position="left">
            <el-form-item label="" prop='parentId'>
                <el-cascader v-model="dialogTypeTitle.parentId" :options="treeData" :show-all-levels="false"  @change="handleTree" :props='cascaderPeops' style="width:100%">
                    <template slot-scope="{ node, data }">
                        <span>{{ data.label }}</span>
                        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                    </template>
                </el-cascader>
            </el-form-item>
            <el-form-item label="" prop='name' >
                <el-input v-model="dialogTypeTitle.name" placeholder="" ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
            <el-button @click="dialogTypeTitleVisible = false">关 闭</el-button>
            <el-button type="primary" @click="handleEditTypeTitle('dialogTypeTitle')">确 认</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { listOption } from "@/const-personal/sample/project.js"
import { validateAcquaintance } from "@/util/validate.js"
export default {
  name: "SampleProject",
  data() {
    return {
        formSearch: {
            name: "",
        },
        tableOption:listOption,
        treeOption:{
            children: 'children',
            label: 'label'
        },
        page: {
            total: 10, //总页数
            currentPage: 1, //当前页数
            pageSize: 10, //每页显示多少条
            pageSizes:[10]
        },
        tableLoading: false,
        tableData:[{id:0,status:2},{id:2,status:1}],//数据
        treeData:[{
            id:0,
              label:'全部',
              value:0,
            children:[{
              id:0,
              label:'一级部门',
              value:0,
              children:[
                {
                  id:1,
                  label:'一级部门1',
                  value:0,
                },{
                  id:2,
                  label:'一级部门2',
                  value:0,
                }
              ]
            },{
              id:3,
              label:'二级部门',
              value:0,
              children:[
                {
                  id:4,
                  label:'二级部门1',
                  value:0,
                },{
                  id:5,
                  label:'二级部门2',
                  value:0,
                }
              ]
            }]}],
        // 修改,新增--添加检测项
        dialogTitle:'添加检测项',
        dialogFormVisible:false,
        rules:{
            sn:[{required: true,message: '请输入检测编码',trigger: 'blur'}],
            name:[{required: true,message: '请输入项目名称',trigger: 'blur'}],
            company:[{required: true,message: '请输入单位',trigger: 'blur'}],
        },
        dialogForm:{},
        sampleType:[{id:1,name:"lei1"},{id:2,name:"lei1"}], //样品分类
        testItems:[{id:0,name:'项目1'},{id:1,name:'项目2'}],//检测项目
        //增加分类
        dialogFormTypeVisible:false,
        dialogFormType:{},
        rulesType:{
            parentId:[{required: true,message: '请选择项目分类',trigger: 'change'}],
            content:[{required: true,message: '请输入分类',trigger: 'blur'}],
        },
        // 多级联动配置
        cascaderPeops:{
            value:'id',
            label:'label'
        },
        // 修改分类标题
        dialogTypeTitleVisible:false,
        dialogTypeTitle:{name:'',parentId:[]},
        rulesTypeTitle:{
            name:[{required: true,message: "不能为空",trigger: 'blur'}],
            parentId:[{required: true,message: "不能为空",trigger: 'change'}],
        }
    }
  },
  methods: {
    //   点击树
    handleNodeClick(data) {
        console.log(data);
    },
    // 搜索
    searchFormSubmit() {},
    // 重置
    handleReset() {},
    // 切换页面
    currentPage(val){
        console.log(val)
    },
    // 新增
    handleAdd(){
        this.dialogFormVisible=true;
        this.dialogTitle='添加检测项';
        this.dialogForm={
            content:'',
            parentId:null,
        }
    },
    // 修改
    handleEdit(row,index){
        console.log(row,index)
        this.dialogFormVisible=true;
        this.dialogTitle='修改检测项';
    },
    // 删除
    handleDelete(row,index){

    },
    // 确认新增/修改
    handleAddLine(formName){
        this.$refs[formName].validate((valid) => {
            if (valid) {
                this.dialogFormVisible=false;
            }
        })
    },
    // 新增树--类型
    appendTreeType(){
        this.dialogFormTypeVisible=true;
    },
    // 修改分类标题
    editTree(node, data){
        // const newChild = { id: id++, label: 'testtest', children: [] };
        // if (!data.children) {
        //   this.$set(data, 'children', []);
        // }
        // data.children.push(newChild);
        this.dialogTypeTitleVisible=true;
        // this.dialogTypeTitle
    },
    // 删除分类
    removeTree(node, data){
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
    },
    // 确认修改树
    handleEditTypeTitle(formName){
        this.$refs[formName].validate((valid) => {
            if (valid) {
                this.dialogTypeTitleVisible=false;
            }
        })
    },
    // 增加分类--选中树
    handleTree(value){
        console.log(value)
        //  this.dialogFormType.parentId=value;
    },
    // 增加分类---input 回车事件
    changeInput(value){
        console.log(this.dialogFormType.content)
        console.log(value)
    },
    // 确认新增-分类--树
    handleAddType(formName){
        this.$refs[formName].validate((valid) => {
            if (valid) {
                this.dialogFormTypeVisible=false;
            }
        })
    }
  }
};
</script>

<style scoped>
.add-type{
    padding-bottom:20px;
    border-bottom: 1px #333 dotted;
    margin-bottom: 20px;
}
.custom-tree-node{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width:100%;
    align-items: center;
}
</style>